<template>
    <div class="ShareFPV">
        <div style="height:20px;"></div>
        <!-- 两端对齐 -->
        <van-row type="flex" justify="space-between">
            <van-col span="12" style="padding-left:5px;">
                <van-button square type="danger" style="float:left;" size="normal" @click="clickCancel">取消</van-button>
            </van-col>
            <van-col span="12" style="padding-right:5px;">
                <van-button square type="primary" style="float:right;" size="normal" @click="clickPost">发布</van-button>
            </van-col>
        </van-row>

        <van-dialog v-model="show_dialog" :title="dialog_title" :show-confirm-button="show_dialog" :show-cancel-button="show_dialog" @confirm="onConfirm" @cancel="onCancel">
            <Adsense data-ad-client="ca-pub-6243451787655828" data-ad-slot="4209566881">
            </Adsense>
        </van-dialog>

        <div style="height:20px;"></div>
        <van-field v-model="message" rows="5" autosize type="textarea" placeholder="说点什么吧" />
        <div style="height:20px;"></div>
        <van-uploader v-model="imageList" :max-count="12" preview-size="100px" :afterRead="afterRead" :beforeRead="beforeRead"/>
        <div style="height:20px;"></div>

        <InFeedAdsense data-ad-layout-key="-gw-3+1f-3d+2z" data-ad-client="ca-pub-6243451787655828" data-ad-slot="8442301843">
        </InFeedAdsense>

    </div>
</template>

<script>
    import 'vant/lib/index.css';
    import lrz from "lrz";

    export default
    {
        name: 'ShareFPV',
        props:
        {

        },
        components:
        {

        },
        created()
        {

        },
        data()
        {
            return {
                imageList: [],
                message: '',
                show_dialog: false,
                toast_post: null, //发布文章的toast提示
                dialog_title: '',
            };
        },

        methods:
        {
            strlen(str)
            {
                var len = 0;
                for (var i = 0; i < str.length; i++)
                {
                    var c = str.charCodeAt(i);
                    //单字节加1
                    if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f))
                    {
                        len++;
                    }
                    else
                    {
                        len += 2;
                    }
                }
                return len;
            },
            clickPost()
            {

                if (this.imageList.length < 2)
                {
                    this.$toast.fail("至少2张图片")
                    return false;
                }
                if (this.strlen(this.message) < 15)
                {
                    this.$toast.fail("至少15个字")
                    return false;
                }

                this.toast_post = this.$toast.loading(
                {
                    message: '🚀正在发布...',
                    forbidClick: true,
                    duration: 0
                });

                var formData = new FormData()


                for (let i = 0; i < this.imageList.length; i++)
                {
                    formData.append('photos[]', this.imageList[i].content)
                }
                //
                // for (let i = 0; i < this.choosePartList.length; i++)
                // {
                //     formData.append('parts[]', this.choosePartList[i].id)
                // }

                formData.append('content', this.message)
                formData.append('type', 1)


                let that = this
                this.$axios
                    .post('https://www.17fpv.com/wp-json/jiangqie/v1/userpost/post-add', formData)
                    .then(response =>
                    {
                        if (response.data.code == 1)
                        {
                            that.toast_post.clear()
                            that.$toast.fail(response.data.msg)
                        }
                        else
                        {
                            setTimeout(function(){
                              that.toast_post.clear()
                              that.$toast.success(response.data.msg)

                              that.$router.push({
                                path: '/post-success'
                              })

                            }, 3000)
                        }

                    })
                    .catch(function(error)
                    {
                        console.log(error)
                    });


            },
            clickCancel()
            {
                this.dialog_title = '😭 真的忍心离开吗'
                this.show_dialog = true

            },
            onConfirm () {
              this.$router.push({
                path: '/'
              })
            },
            onCancel () {
              this.show_dialog = false
            },
            afterRead (file) {


              file.status = 'uploading';
              file.message = '上传中...';

              console.log(file)
                lrz(file.file,{quality: 0.3})
                  .then(function (rst) {

                    file.content = rst.base64
                    file.file = rst
                    file.status = '';
                    file.message = '';

                      // 处理成功会执行
                  })
                  .catch(function (err){
                    console.log(err)
                      // 处理失败会执行
                  })
                  .always(function () {
                      // 不管是成功失败，都会执行
                  });


            },
            beforeRead(file) {
              const imageType = [
              'image/png',
              'image/jpeg',
              'image/webp',
              ]
              if(file.type == 'image/gif'){
                this.$toast('不能上传GIF动图');
                return false;
              }
            if (imageType.indexOf(file.type) < 0) {
              this.$toast('请上传图片格式！');
              return false;
            }
            return true;
          }
        },
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .van-sidebar::-webkit-scrollbar
    {
        /*滚动条整体样式*/
        width: 2px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .van-sidebar::-webkit-scrollbar-thumb
    {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px grey;
        background: white;
    }

    .van-sidebar::-webkit-scrollbar-track
    {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px white;
        border-radius: 10px;
        background: white;
    }

    .search::-webkit-scrollbar
    {
        /*滚动条整体样式*/
        width: 2px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .search::-webkit-scrollbar-thumb
    {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px grey;
        background: white;
    }

    .search::-webkit-scrollbar-track
    {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px white;
        border-radius: 10px;
        background: white;
    }

    .delete-button
    {
        height: 100%;
    }

    .van-tag--danger
    {
        margin-top: 5px;
    }

    .van-uploader
    {
        padding: 15px;
    }

    .van-cell__value--alone
    {
        font-size: 16px;
    }

    .van-field
    {
        font-size: 16px;
    }

    .van-dialog
    {
        border-radius: 5px;
    }

</style>
